<template>
	<view class="homeAll">
		<!-- 搜索框 -->
		<view class="search-style" @click="goSearch">
			<fui-nav-bar title="标题内容" :isFixed="true" :custom="true" background="rgba(0,0,0,0.1)" style='position: relative;'>
				<!-- <fui-search-bar disabled class='fuiSearch' :paddingLr="0" radius='36' inputBackground="rgba(224, 224, 224, 0.3)"
				 background="rgba(0,0,0,0)" :showLabel='false'>
				</fui-search-bar> -->
				<view class="fuiSearch">
					<fui-search-bar disabled isLeft background="rgba(0,0,0,0)" radius="36" inputBackground="rgba(0,0,0,0)" :showLabel='false'
					 style='position: relative;'></fui-search-bar>
					<view class="stySearch">
						<image class="fangdj" :src="baseOssUrl + 'icon/fangdj.png'" ></image>
					</view>
				</view>
			</fui-nav-bar>

		</view>

		<view class="home_header">
			<view class="home_weth">
				微山县
				<!-- <text>32C</text> -->
			</view>
			<!-- 首页轮播 -->
			<fui-swiper-dot type="1" :items="swpItems" :current="current" :styles="styles">
				<swiper class="fui-banner__wrap" @change="swpChange" circular :indicator-dots="false" autoplay :interval="4000"
				 :duration="150">
					<swiper-item v-for="(item,index) in JqjsList" :key="index" @click="swiperBnt(item)">
						<view class="fui-banner__item">
							<image class="_img" :src="baseOssUrl2 + item.phone" alt="" mode="aspectFill" />
						</view>
					</swiper-item>
				</swiper>
			</fui-swiper-dot>

		</view>
		<!-- 菜单 -->
		<view class="home_cdan marin25">
			<fui-grid :square="false" :columns="4" :showBorder='false'>
				<fui-grid-item v-for="(item,index) in menuItems" :key="index">
					<view class="fui-grid__cell fui-padding" @click="goMenu(item)">
						<image :src="item.path" class="fui-icon__2x" mode="widthFix">
						</image>
						<text class="fui_name">{{item.name}}</text>
					</view>
				</fui-grid-item>
			</fui-grid>

		</view>
		<!-- 热门景点 -->
		<!-- <button type="default" @click="goPay">123</button> -->
		<view class="home_rm marin25">
			<view class="home_wz">
				文创特产
			</view>
			<view class="home_jd">
				<view class="jd_left" @click="homejdBnt(item)">
					<img :src="baseOssUrl2 + WclList[hotClickIndex].headPhoto" alt="">
					<view class="jd_introduce">
						<text>{{WclList[hotClickIndex].title}}</text>
						<text style="text-overflow :ellipsis;white-space :nowrap;overflow : hidden;">{{WclList[hotClickIndex].jj || ''}}</text>
					</view>
				</view>
				<view class="jd_right">
					<img v-for="(item,index) in WclList" :key="index" @click="hotClick(index)" :src="baseOssUrl2 + item.headPhoto" alt="">
				</view>
			</view>
		</view>
		<view class="strategy-box">
			<view class="strategy-title" style="margin-left: 25rpx;">
				出行攻略
			</view>
			<view class="recomContent " style="padding-bottom: 150rpx;">
				<fui-waterfall leftGap="24" rightGap="24">
					<fui-waterfall-item v-for="(item,index) in YwglList" :key="index"
						:src="baseOssUrl2 + item.phone"  @click="detalisBnt(item)" >
						<view class="fui-text" style="padding-bottom: 15rpx;padding-top: 15rpx;text-overflow :ellipsis;white-space :nowrap;overflow : hidden;">{{item.name}}</view>
					</fui-waterfall-item>
				</fui-waterfall>
			</view>
		</view>
		<f-tabs :current-page="0"></f-tabs>
	</view>
</template>

<script>
	import {
		baseOssUrl,
		baseOssUrl2
	} from '@/common/settings';
	export default {
		components: {

		},
		onShareAppMessage() {
			return {
				title: '云游微山湖（微山湖周边“吃住行游购娱”线上平台）',
				path: 'pages/home/home',
				success(res) {
					uni.showToast({
						title: '分享成功'
					});
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					});
				}
			};
		},
		data() {
			return {
				JqjsList:[], //景区列表
				YwglList:[], //出行列表
				WclList:[], //文创列表
				page:1,
				limit:10,
				current: 0,
				isSearch: true,
				baseOssUrl: baseOssUrl,
				baseOssUrl2:baseOssUrl2,
				swpItems: [
				{
					iconPath: baseOssUrl + 'icon/home_lb.png',
				},{
					iconPath: baseOssUrl2 + 'shanghutest/f4404152208abc3cd96782f1b88dc6c4',
				}, {
					iconPath: baseOssUrl2 + 'shanghutest/b967f39a76bea3c6aedcef0686da99d8',
				}],
				styles: {
					// width:25,
					left: 600,
					height: 10,
					bottom: 100,
					background: '#888888',
					activeBackground: '#FFFFFF',
					activeWidth: 40,
				},
				menuItems: [{
					path: baseOssUrl2 + "shanghutest/f9b4c42a509d06ab8cc6f3c8a246538b",
					name: '酒店民宿',
					id: 1,
				}, {
					path: baseOssUrl2 + "shanghutest/da31ddd057358e6262640a666bc8dc6b",
					name: '景区门票',
					id: 2,
				}, {
					path: baseOssUrl2 + "shanghutest/2e0d742604ff624c906fbc7e9555563b",
					name: '特色美食',
					id: 3,
				}, {
					path: baseOssUrl2 + "shanghutest/73da7315347bea6fe35e107d8343b950",
					name: '文创特产',
					id: 4,
				}, {
					path: baseOssUrl2 + "shanghutest/9557a2705fe7e619b66b41873456b102",
					name: '景区介绍',
					id: 5,
				}, {
					path: baseOssUrl2 + "shanghutest/81ea82b1fb315e055d63be62d6aa64c6",
					name: '出行攻略',
					id: 6,
				},{
					path: baseOssUrl2 + "shanghutest/90df93e431d86c8a91fdb1f685366188",
					name: '其他',
					id: 7,
				},{
					path: baseOssUrl2 + "shanghutest/b2b278e4184c16414dd9bfb12d656d52",
					name: '备用按钮',
					id: 8,
				},],
				hotClickIndex: 0,
				jDianItemsL: [{
					path: baseOssUrl2 + "shanghutest/f364c4a86a8675d5156f8513d5534ee",
					name: '铁道游击队纪念园',
					text: '去铁道游击队纪念园了解抗日历史'
				}, {
					path: baseOssUrl2 + "shanghutest/393a5fe1c12f6ff7c4f4b095902a1e6c",
					name: '望湖塔',
					text: '站在望湖塔上一览微山岛风光'
				}, {
					path: baseOssUrl2 + "shanghutest/500166a8755cd3befaadedcf4012b3af",
					name: '张良墓',
					text: '在张良墓感受这里悠久的历史气息'
				}, {
					path: baseOssUrl2 + "shanghutest/8565356b1feedc8f527e5ad572564155",
					name: '微山湖民间藏品馆',
					text: '去民间展品馆看一看老物件吧！'
				}],
				jDianItemsR: [{
					path:baseOssUrl2 + "shanghutest/f364c4a86a8675d5156f8513d5534ee",
				}, {
					path:baseOssUrl2 + "shanghutest/393a5fe1c12f6ff7c4f4b095902a1e6c",
				}, {
					path:baseOssUrl2 + "shanghutest/500166a8755cd3befaadedcf4012b3af",
				}, {
					path:baseOssUrl2 + "shanghutest/8565356b1feedc8f527e5ad572564155",
				}],

			}
		},
		onShow() {
			if(uni.getStorageSync('yc_m_token')) {
				// 获取景区介绍列表
				this.getJqjsList()
				// 获取出行攻略列表
				this.getYwglList()
				// 获取文创推荐列表
				this.getWclList()
			}
		},
		methods: {
			// 获取文创推荐列表
			getWclList() {
				this.$http.get(this.$httpApi.sysyList, {
					data: {
						page:this.page,
						limit: 999,
					}
				}).then(res => {
					if (res.code == 0) {
						if (res.pages == 1) {
							this.WclList = res.page
						} else if (res.pages == 0) {
							this.WclList = []
						} else {
							this.WclList = this.WclList.concat(res.page)
						}
						console.log("list", this.WclList)
						this.total = res.total
					}
				})
			},
			// 获取景区介绍列表
			getJqjsList() {
				this.$http.get(this.$httpApi.jqjsList, {
					data: {
						page:this.page,
						limit: 4,
					}
				}).then(res => {
					if (res.code == 0) {
						this.JqjsList = res.page
					}
				})
			},
			// 获取出行攻略
			getYwglList() {
				this.$http.get(this.$httpApi.ywglList, {
					data: {
						page:this.page,
						limit: 999,
					}
				}).then(res => {
					if (res.code == 0) {
						if (res.pages == 1) {
							this.YwglList = res.page
						} else if (res.pages == 0) {
							this.YwglList = []
						} else {
							this.YwglList = this.YwglList.concat(res.page)
						}
						console.log("list", this.YwglList)
						this.total = res.total
					}
				})
			},
			// 点击轮播图和热门景点
			swiperBnt(item) {
				if(item.url) {
					uni.navigateTo({
						url:item.url + '?id=' + item.id
					})
				}
			},
			// 点击大图跳转
			homejdBnt() {
				if(this.WclList[this.hotClickIndex].url) {
					uni.navigateTo({
						url:this.WclList[this.hotClickIndex].url + '?id=' + this.WclList[this.hotClickIndex].id
					})
				}
			},
			goPay() {
				this.$http.post(this.$httpApi.ordeWxPay + "?userId=34" + "&number=JD572602356017922048").then(res => {

					if (res.code == 0) {
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.response.timeStamp,
							nonceStr: res.response.nonceStr,
							package: 'prepay_id=' + res.response.prepayId,
							signType: 'MD5',
							paySign: res.response.paySign,
							success: res => {
								uni.navigateTo({
									// url: "/pages/paySuccess/index"
								})
							},
							fail: err => {
								console.log('fail:' + JSON.stringify(err));
							}
						});
					}
				})
			},
			detalisBnt(e) {
				uni.navigateTo({
					url: "/pages/trip/details/index?id=" + e.id
				})
			},
			swpChange(e) {
				this.current = e.detail.current;
			},
			searchChange(e) {
				uni.navigateTo({
					url: "/pages/searchList/index"
				})
			},
			goSearch() {
				uni.navigateTo({
					url: "/pages/searchList/index?num=1"
				})
			},


			hotClick(index) {
				this.hotClickIndex = index;
			},
			// 菜单跳转
			goMenu(val) {
				if (val.id == 1) {
					uni.navigateTo({
						url: '/pages/hotel/index',
					});
				} else if (val.id == 2) {
					// console.log("车票船票")
					uni.navigateTo({
						url: '/pages/ship/index',
					});
				} else if (val.id == 3) {
					uni.navigateTo({
						url: '/pages/deliciousFood/index',
					});
				} else if (val.id == 4) {
					uni.navigateTo({
						url: '/pages/writing/index',
					});
					
				} else if (val.id == 5) {
					uni.navigateTo({
						url: '/pages/scenic/index',
					});
					
				} else if (val.id == 6) {
					uni.navigateTo({
						url: '/pages/trip/index',
					});
					
				} else if (val.id == 7) {
					uni.showToast({
						icon: 'none',
						title: '功能正在开发中~',
						duration: 2000
					});
					// uni.navigateTo({
					// 	url: '/pages/recommend/index',
					// });
					
				} else if (val.id == 8) {
					// uni.navigateTo({
					// 	url: '/pages/scenic/index',
					// });
					uni.showToast({
						icon: 'none',
						title: '功能正在开发中~',
						duration: 2000
					});
				}
			}

		}
	}
</script>

<style lang="scss" scoped>
	.homeAll {
		.search-style {
			display: flex;
			align-items: center;
			position: relative;

			.fuiSearch {
				width: 450rpx;
				height: 72rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: rgba(224, 224, 224, 0.3);
				border-radius: 36rpx;
				padding: 0 24rpx 0 0;
			}

			/deep/.fui-search__bar-wrap {
				padding: 0 !important;
			}

			// 放大镜style
			.stySearch {
				// margin-right: 100rpx;
				// position: absolute;
				// right: 160px;
				// top: 66%;
				margin-top: 10rpx;
				z-index: 999;

				.fangdj {
					margin-right: 6rpx;
					width: 38rpx;
					height: 38rpx;
				}
			}
		}




		// 底部菜单
		/deep/.fui-tabbar__wrap {
			width: 90%;
			margin: 0 5%;
			border-radius: 60rpx;
			bottom: 50rpx;
		}

		/deep/.fui-tabbar__safe-area {
			display: none;
		}

		.fui-search__bar-label .data-v-1cc8ebce .fui-sb__label-center {
			background: none;
		}

		// 搜索栏搜索的文字颜色
		/deep/ .fui-sb__input-color {
			color: #e2e2e2 !important;
		}

		// 底部安全区
		/deep/.fui-search__bar-icon {
			display: none;
		}

		// 头部内容-----
		.home_header {
			position: relative;
			// 天气
			.home_weth {
				font-size: 36rpx;
				color: #FFFFFF;
				position: absolute;
				top: 200rpx;
				left: $uni-spacing-row-base;
				z-index: 1;

				text {
					padding-left: 20rpx;
					font-size: 28rpx;
				}

			}

			.fui-banner__item {
				width: 100%;
				height: 700rpx;
				color: #FFFFFF;
				font-size: 34rpx;
				font-weight: 600;

				._img {
					width: 100% !important;
					height: 100% !important;
				}
			}

			.fui-banner__wrap {
				height: 700rpx;
			}
		}

		// 底部菜单大小---
		/deep/.fui-tabbar__icon {
			width: 38rpx !important;
			height: 38rpx !important;
		}

		/deep/.fui-tabbar__icon-wrap {
			width: 38rpx !important;
			height: 38rpx !important;
		}

		/deep/.fui-tabbar__wrap {
			background: #FFFFFF;
			box-shadow: 0px 2px 12px 1px rgba(0, 0, 0, 0.11);
		}

		// 底部菜单
		/deep/.fui-tabbar__text {
			// font-size: 20rpx !important;
			margin-top: 3rpx;
		}

		// ----
		//放大镜位置----
		/deep/.fui-search__bar-box {
			position: relative;
		}

		/deep/.fui-search__bar-icon {
			position: absolute;
			right: 36rpx;

		}

		//颜色
		/deep/.fui-sbi__circle {
			border: 1px solid #dcdcdc;
		}

		/deep/.fui-sbi__line {
			border: 1px solid #dcdcdc;
		}

		// 菜单
		.home_cdan {
			background: #FFFFFF;
			border-radius: 16rpx;
			margin-top: -80rpx;
			z-index: 1;
			position: relative;
			box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);

			.fui-grid__cell {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 30rpx;

				.fui_name {
					font-size: 22rpx;
				}

				.fui-icon__2x {
					margin-bottom: 10rpx;
					width: 70rpx;
					height: 70rpx;
				}
			}



		}
		// 出行攻略
		.strategy-box {
			.strategy-title {
				font-size: $uni-font-size-subtitle;
				color: $uni-color-subtitle;
				margin: 25px 0;
				font-weight: bold;
			}
			.list-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-wrap: wrap;
				padding-bottom: 150rpx;
				.item-box {
					// border: 2rpx solid #333333;
					width: 330rpx;
					margin-bottom: 40rpx;
					.photo {
						width: 330rpx;
						height: 420rpx;
						border-radius: 12rpx;
						// background: $uni-color-img;
					}
					.text {
						margin-top: 14rpx;
						height: 78rpx;
						font-size: 28rpx;
						color: #333333;
						overflow: hidden!important;
						text-overflow: ellipsis!important;
						-webkit-line-clamp: 2;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						white-space: normal;
						word-wrap: break-word;
						font-weight: bold;
					}
				}
			}
		}
		// 热门景点
		.home_rm {
			.home_wz {
				font-size: $uni-font-size-subtitle;
				color: $uni-color-subtitle;
				margin: 25px 0;
				font-weight: bold;
			}

			.home_jd {
				display: flex;
				justify-content: space-between;
				font-size: 26rpx;
				background: #fff;
				border-radius: 16rpx;

				.jd_left {
					width: 80%;
					height: 450rpx;
					position: relative;

					img {
						width: 100%;
						height: 100%;
					}

					.jd_introduce {
						width: 100%;
						background: rgba(29, 29, 29, 0.4);
						color: #FFFFFF;
						border-radius: 0rpx 0rpx 16rpx 16rpx;
						height: 98rpx;
						position: absolute;
						bottom: 0rpx;

						text:nth-child(1) {
							color: #FFFFFF;
							font-size: 30rpx;
							display: block;
							margin-bottom: 10rpx;
							margin-left: 25rpx;
						}

						text:nth-child(2) {
							color: #FFFFFF;
							font-size: 26rpx;
							display: block;
							margin-left: 25rpx;
						}
					}
				}

				.jd_right {
					width: 21%;
					height: 450rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					border-radius: 10rpx;
					img {
						width: 90%;
						margin: 6rpx;
						border-radius: 10rpx;
					}
				}

			}
		}

	}
</style>
